<template>
  <div id="reportDriver">
    <div class="reg">
      <group title="" class="weui-cells_form">
        <x-input v-model="formItem.phone" type="tel" title="司机电话" class="weui-vcode" placeholder="请输入手机号" :max="11">
        </x-input>
        <popup-picker show-name title="配送车型" :data="carTypeItem" v-model="formItem.cartype"></popup-picker>
        <x-input v-model="carnum" title="车牌号" class="weui-vcode" placeholder="请输入车牌号" :max="7">
        </x-input>
      </group>
    </div>
    <div style="margin: 0.3rem 0.2rem 0.2rem 0.2rem">
      <x-button type="primary" :show-loading="loading" action-type="button" @click.native="submit">{{btn}}</x-button>
    </div>
  </div>
</template>

<script>
import { PopupPicker } from 'vux'
import { checkCarNum, checkTel } from '../libs/fn'
export default {
  name: "report-driver",
  components: {
    PopupPicker
  },
  created() {
    const { oid, serviceid } = this.$route.query
    this.oid = oid
    this.serviceid = serviceid
    this.getCarType()
  },
  watch: {
    carnum: function (val) {
      this.carnum = val.toLocaleUpperCase()
    }
  },
  data() {
    return {
      oid: 0,
      serviceid: 0,
      formItem: {
        phone: '',
        cartype: []
      },
      carnum: '',
      btn: '上报司机',
      loading: false,
      carTypeItem: []
    }
  },
  methods: {
    getCarType() {
      this.$http.post($config.host + '/api/Inquirycitycar/getcarlist', qs.stringify({
        service_id: this.serviceid
      })).then((res) => {
        const {code, msg, data} = res.data
        if(code == '1') {
          this.carTypeItem = [Array.from(data, x => ({name: x.car_name, value: x.id}))]
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    submit() {
      const { phone, cartype } = this.formItem
      if(!checkTel(phone)) {
        this.$vux.toast.text('手机号码不正确', 'middle')
        return false
      }
      if(!cartype.length) {
        this.$vux.toast.text('请选择配送车型', 'middle')
        return false
      }
      if(!checkCarNum(this.carnum)) {
        this.$vux.toast.text('车牌号不正确', 'middle')
        return false
      }
      this.loading = true
      this.btn = '正在上报司机'

      this.$http.post($config.host + '/api/Inquirycitycar/updateQuotesThrees', qs.stringify({
        oid: this.oid,
        service_id: this.serviceid,
        driver_phone: phone,
        driver_car_id: cartype[0],
        driver_car_num: this.carnum,
        driver_car_length: '',
        is_collect: 0
      })).then((res) => {
        const {code, msg, data} = res.data
        if(code == '1') {
          this.$vux.toast.text('上报成功', 'middle')
          this.$router.push({path: '/order'})
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.loading = false
          this.btn = '重新上报'
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.loading = false
        this.btn = '重新上报'
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    }
  }
}

</script>

<style scoped>
  .reg{
    margin: 0.2rem;
    background: #fff;
    height: auto;
    box-shadow: 0px 0px 0.15rem rgba(0, 0, 0, 0.07);
  }
</style>
